<template>
    <div class="page-merchant-manage">
        <ManageHeader v-if="userBasicInfo" :info="userBasicInfo" bg-color="blue"/>
        <div class="main">
            <div class="tabbox">
                <TabItem
                    v-for="(item, index) in tabs"
                    :key="index"
                    :icon="item.icon"
                    :to="item.to"
                    :title="item.title"
                    />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import ManageHeader from '@/features/manage/header.vue';
import TabItem from '@/features/manage/tabItem.vue';
import { Component, Vue } from 'vue-property-decorator';
import store from '@/store';
import { ROUTE_NAME } from '@/lib/constant';

@Component({
    name: 'MerchantManage',
    components: {
        ManageHeader,
        TabItem,
    },
})
export default class MerchantManage extends Vue {
    public tabs: any = [
        {
            icon: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/e623_blue.png',
            title: '订单管理',
            to: { name: ROUTE_NAME.MERCHANT_ORDER_MANAGE },
        },
        {
            icon: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/e623_blue.png',
            title: '订单看板',
            to: {
                name: ROUTE_NAME.ORDER_MERCHANT_MANAGE,
                query: {
                    title: '订单看板',
                },
            },
        },
        {
            icon: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/ea62_blue.png',
            title: '商家职工看板',
            to: { name: ROUTE_NAME.MERCHANT_EMPLOYEE, query: { level: '3' } },
        },
        {
            icon: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/ed32_blue.png',
            title: '返利会员看板',
            to: { name: ROUTE_NAME.MERCHANT_EMPLOYEE, query: { level: '1' } },
        },
        {
            icon: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/e679_blue.png',
            title: '城市合伙人看板',
            to: { name: ROUTE_NAME.MERCHANT_EMPLOYEE, query: { level: '2' } },
        },
    ];

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-merchant-manage {
    min-height: 100%;
    background-color: #f8f8f8;
    .main {
        .tabbox {
            overflow: hidden;
        }
    }
}

</style>
